import React, { Component } from 'react'
export class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Hellow React',
    }
  }
  async changeText() {
    // 1.将setState放入定时器中是同步的
    setTimeout(() => {
      this.setState({
        message: this.state.message + '6',
      })
      console.log(this.state.message)
    }, 0)
  }
  componentDidMount() {
    // 2.将setState放入原始事件监听中
    document.getElementById('btn').addEventListener('click', () => {
      this.setState({
        message: this.state.message + '7',
      })
      console.log(this.state.message)
    })

    this.setState({
      message: this.state.message + '8',
    })
    console.log(this.state.message)
  }
  render() {
    return (
      <>
        <div>{this.state.message}</div>
        <button onClick={() => this.changeText()}>改变文本1</button>
        <hr />
        <button id='btn'>改变文本2</button>
      </>
    )
  }
}
